<template>
  <div>
    <div class="header_wrap">
      <h3>{{ selectGroupName }}</h3>
      <div class="header_nav">
        <div class="card-container">
          <a-tabs
            type="editable-card"
            v-model="activeKey"
            hide-add
            @change="callback"
            @edit="onEdit"
            animated
          >
            <a-tab-pane
              v-for="item in panes"
              :key="item.key"
              :closable="item.closable"
            >
              <span slot="tab">
                <a-icon type="apple" />
                {{ item.title }}
              </span>
              <!-- is渲染为指定的组件 add传递方法给子组件触发   -->
              <div
                :is="item.component"
                :add="add"
                :getGroupData="getGroupData"
                :removeTableItem="removeTableItem"
              ></div>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import statistics from "./statistics";
import learningTest from "./learningTest";
import notice from "./notice";
import testPage from "./testPage";
import question from "./question";
import createTest from "./createTest";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    //渲染默认的tab标签
    const panes = [
      {
        title: "通知",
        key: "0",
        component: "notice",
        closable: false,
      },
      {
        title: "测试",
        key: "1",
        component: "learningTest",
        closable: false,
        auth: "User",
        returnDefault: true,
      },
      {
        title: "统计",
        key: "2",
        component: "statistics",
        closable: false,
        auth: "Manager",
      },
      {
        title: "发布测试",
        key: "3",
        component: "question",
        closable: false,
        auth: "Manager",
        returnDefault: true,
      },
    ];
    return {
      activeKey: panes[0].key,
      panes,
      isTestPage: false, //是否在测试页面
    };
  },
  methods: {
    ...mapMutations("IntemshipGroup", ["setQuestionData"]),    
    ...mapMutations(['setHomeSelectedState']),
    //切换tab的回调
    callback(key) {
      console.log(key);
    },
    onEdit(targetKey, action) {
      this[action](targetKey);
    },
    //点击测试触发(给tab添加测试页)
    add(title, component) {
      if (this.isTestPage) {
        this.$message.warning("您已经存在了一个测试页面");
        this.activeKey = this.panes.length;
        return false;
      }
      const panes = this.panes;
      panes.push({
        title,
        component,
        key: panes.length + 1,
      });
      this.panes = panes;
      this.activeKey = panes.length;
      this.isTestPage = true;
      return true;
    },
    remove() {
      var than = this;
      const content =
        this.UserInfo.roleName.indexOf("user") >= 0 ? "测试" : "编辑";
      this.$confirm({
        title: `您确定要退出这次${content}？`,
        content: <div style="color:red;">关闭后,您修改的记录将不会保存</div>,
        cancelText: "取消",
        okText: "确定",
        okType: "danger",
        onOk() {
          than.removeTableItem();
        },
      });
    },
    //移除tab项
    removeTableItem() {
      const panes = this.panes.filter((pane) => pane.key !== this.panes.length);
      this.panes = panes;
      this.activeKey = panes.find(
        (item) =>
          item.returnDefault && this.UserInfo.roleName.indexOf(item.auth) >= 0
      ).key;
      this.isTestPage = false;
      this.getGroupData();
    },
    //根据身份渲染tabs栏
    panesInit() {
      this.panes = this.panes.filter((item) => {
        if (item.auth) return item.auth.indexOf(this.UserInfo.roleName) == 0;
        else return true;
      });
    },
    //获取小组数据
    getGroupData() {
      this.$api
        .GetExercises({ id: this.selectGroupKey })
        .then((res) => {
          var temp = res.data.result.map((item) => {
            return {
              id: item.id,
              title: item.name,
              status: item.publishStatus,
              createTime: item.createTime,
              endTime: item.endTime,
            };
          });
          temp.splice(temp.length, 0, { title: "添加测试" });
          this.setQuestionData(temp);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  watch: {
    selectGroupKey() {     
      this.getGroupData();
    },
    isTestPage(){
     this.setHomeSelectedState();
    }
  },
  components: {
    statistics,
    learningTest,
    notice,
    testPage,
    question,
    createTest,
  },
  computed: {
    ...mapState(["UserInfo", "selectGroupKey", "selectGroupName"]),
  },
  created() {
    this.getGroupData();
    this.panesInit();
  },
};
</script>

<style lang="less">
.header_wrap {
  h3 {
    height: 60px;
    font-size: 30px;
    color: #438eb9;
    display: flex;
    align-items: center;
    padding-left: 25px;
    border-bottom: 2px solid #f3f3f3;
  }

  .header_nav {
    .card-container {
      padding: 15px;

      .ant-tabs-bar {
        border: 0;
      }

      .ant-tabs-nav-container {
        border-bottom: 1px solid #e8e8e8;
      }

      .ant-tabs-tab {
        padding: 0 10%;
        border-radius: 0;
        margin: 0 5px 0 0;
        background-color: white;
        box-sizing: border-box;
        border: 1px solid white;
        border-top: 2px solid white;
      }

      .ant-tabs-tab-active {
        border-top: 2px solid #4c8fbd;
        border-right: 1px solid #c5d0dc;
        border-left: 1px solid #c5d0dc;
      }
    }
  }
}
</style>
